<template>
  <div p-20>
    <div text-30 font-400>按钮 Button</div>
    <div mt-10>按钮用来触发一些操作。</div>
    <div text-20 mt-10>演示</div>
    <n-grid x-gap="12" :cols="2">
      <n-gi>
        <div border="1 blueGray" p-20>
          <div text-20>基础</div>
          <n-space>
            <n-button>Default</n-button>
            <n-button type="tertiary"> Tertiary </n-button>
            <n-button type="primary"> Primary </n-button>
            <n-button type="info"> Info </n-button>
            <n-button type="success"> Success </n-button>
            <n-button type="warning"> Warning </n-button>
            <n-button type="error"> Error </n-button>
          </n-space>
        </div>
      </n-gi>
      <n-gi>
        <div p-20 border="1 blueGray">
          <div text-20>基础</div>
          <n-space>
            <n-button strong secondary> Default </n-button>
            <n-button strong secondary type="tertiary"> Tertiary </n-button>
            <n-button strong secondary type="primary"> Primary </n-button>
            <n-button strong secondary type="info"> Info </n-button>
            <n-button strong secondary type="success"> Success </n-button>
            <n-button strong secondary type="warning"> Warning </n-button>
            <n-button strong secondary type="error"> Error </n-button>
            <n-button strong secondary round> Default </n-button>
            <n-button strong secondary round type="primary"> Primary </n-button>
            <n-button strong secondary round type="info"> Info </n-button>
            <n-button strong secondary round type="success"> Success </n-button>
            <n-button strong secondary round type="warning"> Warning </n-button>
            <n-button strong secondary round type="error"> Error </n-button>
            <n-button strong secondary circle>
              <template #icon>
                <n-icon><IconLogo /></n-icon>
              </template>
            </n-button>
            <n-button strong secondary circle type="primary">
              <template #icon>
                <n-icon><IconLogo /></n-icon>
              </template>
            </n-button>
            <n-button strong secondary circle type="info">
              <template #icon>
                <n-icon><IconLogo /></n-icon>
              </template>
            </n-button>
            <n-button strong secondary circle type="success">
              <template #icon>
                <n-icon><IconLogo /></n-icon>
              </template>
            </n-button>
            <n-button strong secondary circle type="warning">
              <template #icon>
                <n-icon><IconLogo /></n-icon>
              </template>
            </n-button>
            <n-button strong secondary circle type="error">
              <template #icon>
                <n-icon><IconLogo /></n-icon>
              </template>
            </n-button>
          </n-space>
        </div>
      </n-gi>
    </n-grid>
  </div>
</template>

<script setup>
import { IconLogo } from '@/components/app-icons/index.js'
</script>

<style scoped></style>
